<template>
<div>
  <a-popover title="列设置" trigger="click" position="br">
    <a-button>
      <template #icon>
        <icon-settings />
      </template>
    </a-button>
    <template #content>
      <a-checkbox-group v-model="selected" direction="vertical" @change="onChange">
        <a-checkbox v-for="col in originalColumns" :key="col.dataIndex" :value="col.dataIndex">
          {{ col.title }}
        </a-checkbox>
      </a-checkbox-group>
    </template>
  </a-popover>
</div>
</template>

<script lang="ts" setup>
import { onBeforeMount, ref } from "vue";

const props = defineProps({
  columns: {
    type: Array,
    required: true,
    default: () => []
  }
})

const emits = defineEmits(['update:columns'])

const originalColumns = ref<any>([...props.columns])
const dynamicColumns = ref<any>([])
const selected = ref<string[]>([])

onBeforeMount(() => {
  dynamicColumns.value = originalColumns.value
  selected.value = dynamicColumns.value.map((col: { dataIndex: string; }) => col?.dataIndex)
  emits('update:columns', props.columns)
})

const onChange = (columns: string[]) => {
  dynamicColumns.value = originalColumns.value.filter((col: { dataIndex: string; }) => columns.includes(col?.dataIndex))
  emits('update:columns', dynamicColumns.value)
}

</script>

<script lang="ts">
export default {
  name: "TableColumnSetting"
};
</script>

<style scoped>

</style>
